import axios from "axios";
import { useState, useEffect } from "react";
/**
 * useEffect的使用
 * 【说明】：useEffect是react Hook 钩子函数、用于监听当组件渲染完毕之后所进行的操作
 * 【语法】：useEffect(()=>{},[])
 *          参数一：回调函数；称为副作用函数、用于放置可执行的操作代码
 *          参数二：数组（可选），用于放置依赖项参数，不同的依赖项会印象参数一的执行，当是一个空数组时，
 *                 副作用函数在组件渲染完毕后只执行一次
 */
function useEffectWatch() {
  let [list, setList] = useState([]);
  useEffect(() => {
    async function req() {
      const result = await fetch("http://geek.itheima.net/v1_0/channels");
      const list = await result.json();
      setList(list.data.channels);
    }
    req()
  }, []);

  return (
    <div> {list.map((item, index) => (<li key={index}>{item.name}</li>))} </div>
  );
}

export default useEffectWatch;
